<template>
  <div id="hotTopic">
    <div class="rightBox01">
      <div class="btn_group01">
        <button>热门话题</button>
      </div>

      <div class="rightBox-content">
        <section class="btn_input">
          <radio_group01 :radio_values="['24小时', '近3天', '近7天', '近30天', '近90天']" v-model="value09" />
          <div class="searchBox" style="margin-top: 0px;">
            <el-input
              v-model="topicWords"
              placeholder=" 请输入关键词在排行榜中搜索"
              @keyup.enter.native="toSearch"
            ></el-input>
            <div class="imgBox" @click="toSearch">
              <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
            </div>
          </div>
          <div class="btn_group">
            <button @click="generatorImage">
              <span></span>分享
            </button>
            <button @click="export_data">
              <span></span>导出
            </button>
          </div>
        </section>

        <ul
          class="fixedThead"
          ref="fixedThead"
          :class="{'isShow':isFixed}"
          :style="showLeft==true? 'left:222px':'left:98px'"
        >
          <li>话题</li>
          <li tc v-if="sort == 0">
            参与人数
            <img src="@/assets/meng/down_up.png" class="sort" />
          </li>
          <li tc style=" cursor: pointer; " v-if="sort != 0" @click="sort_fun(true, 1)">
            参与人数
            <img src="@/assets/meng/no_down_up.png" class="sort" />
          </li>
          <li tc v-if="sort == 1">
            总播放量
            <img src="@/assets/meng/down_up.png" class="sort" />
          </li>
          <li tc style=" cursor: pointer; " v-if="sort != 1" @click="sort_fun(false, 2)">
            总播放量
            <img src="@/assets/meng/no_down_up.png" class="sort" />
          </li>
          <li>热门视频TOP3</li>
          <li tc>操作</li>
        </ul>
        <table class="table" ref="capture">
          <thead>
            <tr>
              <th>话题</th>
              <th v-if="sort == 0">
                参与人数
                <img src="@/assets/meng/down_up.png" class="sort" />
              </th>
              <th style=" cursor: pointer;" v-if="sort != 0" @click="sort_fun(true, 1)">
                参与人数
                <img src="@/assets/meng/no_down_up.png" class="sort" />
              </th>
              <th v-if="sort == 1">
                总播放量
                <img src="@/assets/meng/down_up.png" class="sort" />
              </th>
              <th style=" cursor: pointer;" v-if="sort != 1" @click="sort_fun(false, 2)">
                总播放量
                <img src="@/assets/meng/no_down_up.png" class="sort" />
              </th>
              <th>热门视频TOP3</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-show="TopicList.length != 0">
            <tr v-for="(item, index) in TopicList" :key="'c' + index" :id="!index?'tr1':''">
              <td>
                <div class="topic" @click="seeDetails(item.topicId, item)">
                  <img :src="item.thumPic?item.thumPic:noTopicImgUrl" />
                  <p>
                    <span>{{ item.title }}</span>
                  </p>
                </div>
              </td>
              <td>{{ format_num(item.useCount) }}</td>
              <td>{{ format_num(item.playCount) }}</td>
              <td>
                <div class="topVideo">
                  <div
                    class="videoImgBox"
                    v-for="(item1, index1) in item.awemeTop3"
                    :key="'top' + index1"
                  >
                    <img
                      src="@/assets/wang/video/like.png"
                      class="likeImg"
                      v-if="item1.isCollect == 0"
                      @click="addVideoStar(item1.awemeId, item1)"
                    />
                    <img
                      src="@/assets/wang/video/liked.png"
                      class="likeImg"
                      v-if="item1.isCollect == 1"
                      @click="cancelVideoStar(item1.awemeId, item1)"
                    />
                    <img
                      src="@/assets/wang/video/play1.png"
                      class="playImg"
                      @click="playVideo(item1.url)"
                    />
                    <img
                      :src="item1.thumPic"
                      class="videoImg"
                      style="border-radius: 6px;"
                      v-errorImg:video
                    />
                    <div class="zanBox">
                      <img src="@/assets/wang/video/zan.png" />
                      <span>{{ format_num(item1.favoriteCount) }}</span>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                <button @click="seeDetails(item.topicId, item)">查看详情</button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="upgradeBox" v-if="!permissions&&!loading">
          <RankUpgrade class="rankUpgrade" />
        </div>
        <!-- <div class="upgradeBox" v-if="permissions&&!loading&&vipLevel==0">
          <RankUpgrade class="rankUpgrade" />
        </div> -->
        <!-- <p
          class="nothing"
          v-show="TopicList.length<30&&!loading&&permissions&&TopicList.length != 0"
        >我是有底线的～</p> -->
        <div class="pageBox" v-if="!loading&&needing">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="count"
            :page-size="30"
            :current-page="page"
            @current-change="GetTopicList"
            :hide-on-single-page="true"
          ></el-pagination>
        </div>
        <div
          v-loading="loading"
          v-if="loading"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>

        <div class="empty" v-show="TopicList.length==0 && !loading&&permissions">
          <img src="@/assets/liu/zw.png" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog :visible.sync="topicDetails" :show-close="false" v-if="topicDetails">
      <div class="topicDetailsBox">
        <topicDetails
          :topicId="topicId"
          @changeTopicCollect="changeTopicCollect"
          @changeVideoCollect="changeVideoCollect"
        />
      </div>
      <img src="@/assets/wang/video/close.png" class="closeImg" @click="topicDetails = false" />
    </el-dialog>
  </div>
</template>

<script>
export { default } from './hotTopic.js';
</script>
<style lang='less' scoped>
@import './hotTopic.less';
</style>